<!--
 * @Descripttion:泥沙参数
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: yangyongtao
 * @LastEditTime: 2023-11-24 16:24:50
-->
<template>
  <div
    v-if="planDataMsgForm.selectReservoir != '长江中下游'"
    style="height: 100%"
  >
    <div class="left-box">
      <!-- 输入框 -->
      <el-card class="box-card">
        <el-form :model="sedData" label-width="150px">
          <div
            v-for="(item, key) in sedData.topData"
            :key="key"
            class="sedFormInput"
          >
            <el-form-item :label="labelText(key)">
              <el-input
                v-for="(ele, i) in sedData.topData[key]"
                :key="i"
                v-model="sedData.topData[key][i]"
                style="width: 100px; margin-right: 10px"
                readonly
              />
            </el-form-item>
          </div>
        </el-form>
      </el-card>

      <!-- 挟沙力系数 -->
      <el-card class="box-card" :header="labelText('kms')">
        <el-table
          style="margin: 10px 0; width: 100%; min-height: 179px"
          :data="sedData.bottomData['kms']"
          border
          stripe
          max-height="180px"
          size="small"
        >
          <el-table-column prop="dataName" align="center" label="断面名" />

          <el-table-column
            v-for="item in columns['kms']"
            :key="item.dataIndex"
            :label="item.title"
            align="center"
          >
            <template #default="scope">
              {{ scope.row[item.dataIndex] }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 冲淤系数 -->
      <el-card class="box-card" :header="labelText('eds')">
        <el-table
          style="margin: 10px 0; width: 100%; min-height: 179px"
          :data="sedData.bottomData['eds']"
          border
          stripe
          max-height="180px"
          size="small"
        >
          <el-table-column prop="dataName" align="center" label="断面名" />

          <el-table-column
            v-for="item in columns['eds']"
            :key="item.dataIndex"
            :label="item.title"
            align="center"
          >
            <template #default="scope">
              {{ scope.row[item.dataIndex] }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="right-box">
      <!-- 床沙粒径 -->
      <el-card
        class="box-card"
        :header="labelText('csgds')"
        style="margin-bottom: 35px"
      >
        <el-table
          style="margin: 10px 0; width: 100%"
          :data="sedData.bottomData['csgds']"
          border
          stripe
          max-height="300px"
          size="small"
        >
          <el-table-column prop="dataName" align="center" label="断面名" />

          <el-table-column
            v-for="item in columns['csgds']"
            :key="item.dataIndex"
            :label="item.title"
            align="center"
          >
            <template #default="scope">
              {{ scope.row[item.dataIndex] }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 床沙级配 -->
      <el-card class="box-card" :header="labelText('csps')">
        <el-table
          style="margin: 10px 0; width: 100%"
          :data="sedData.bottomData['csps']"
          border
          stripe
          max-height="300px"
          size="small"
        >
          <el-table-column prop="dataName" align="center" label="断面名" />

          <el-table-column align="center" label="粒径级">
            <el-table-column
              v-for="item in columns['csps']"
              :key="item.dataIndex"
              :label="item.title"
              align="center"
            >
              <template #default="scope">
                {{ scope.row[item.dataIndex] }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>

  <div v-else style="height: 100%">
    <div class="left-box">
      <!-- 挟沙力系数 -->
      <el-card style="height: 100%" :header="labelText('kms')">
        <el-table
          style="margin: 10px 0; width: 100%; min-height: 179px"
          :data="cjSedData.kms"
          border
          stripe
          max-height="735px"
          size="small"
          :span-method="roughnessTableSpanMethod"
        >
          <el-table-column
            v-for="item in cjColumns.kms"
            :key="item.dataIndex"
            :label="item.title"
            align="center"
          >
            <template #default="scope">
              {{ scope.row[item.dataIndex] }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 冲淤系数 -->
      <!-- <el-card style="height: 49%" :header="labelText('eds')">
        <el-table
          style="margin: 10px 0; width: 100%; min-height: 179px"
          :data="cjSedData['eds']"
          border
          stripe
          max-height="300px"
          size="small"
          :span-method="roughnessTableSpanMethod"
        >
          <el-table-column
            v-for="item in cjColumns['eds']"
            :key="item.dataIndex"
            :label="item.title"
            align="center"
          >
            <template #default="scope">
              {{ scope.row[item.dataIndex] }}
            </template>
          </el-table-column>
        </el-table>
      </el-card> -->
    </div>
    <div class="right-box">
      <!-- 床沙级配 -->
      <el-card style="height: 100%" :header="labelText('csps')">
        <el-table
          style="margin: 10px 0; width: 100%"
          :data="cjSedData['csps']"
          border
          stripe
          max-height="730px"
          size="small"
          :span-method="roughnessTableSpanMethod"
        >
          <el-table-column prop="title" align="center" label="断面起止编号" />
          <el-table-column label="粒径级" align="center">
            <el-table-column
              v-for="item in cjColumns['csps']"
              :key="item.dataIndex"
              :label="item.title"
              align="center"
            >
              <template #default="scope">
                {{ scope.row[item.dataIndex] }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { ElMessage } from "element-plus";
import {
  ref,
  defineComponent,
  reactive,
  toRefs,
  inject,
  onMounted,
  Ref,
  watch,
  getCurrentInstance,
} from "vue";
import { useStore } from "vuex";
import { cloneDeep } from "lodash-es";

import {
  selectNsArguments,
  writeSed,
  queryBedGradationScheme,
  queryParticlesScheme, // 获取长江中下游协沙力系数
} from "@/request/api";

export default defineComponent({
  name: "sedParam",
  setup: () => {
    const store = useStore();
    const { proxy }: any = getCurrentInstance();

    const state = reactive({
      sedData: {
        topData: {},
        bottomData: {},
      },
      columns: {
        csps: [
          {
            title: "0.008",
            dataIndex: "param1",
          },
          {
            title: "0.031",
            dataIndex: "param2",
          },
          {
            title: "0.125",
            dataIndex: "param3",
          },
          {
            title: "1",
            dataIndex: "param4",
          },
          {
            title: "4",
            dataIndex: "param5",
          },
          {
            title: "32",
            dataIndex: "param6",
          },
          {
            title: "250",
            dataIndex: "param7",
          },
        ],
        csgds: [
          // 1
          {
            title: "干容重",
            dataIndex: "param1",
          },
        ],
        eds: [
          // 2
          {
            title: "e值",
            dataIndex: "param1",
          },
          {
            title: "d值",
            dataIndex: "param2",
          },
          {
            title: "m值",
            dataIndex: "param3",
          },
        ],
        kms: [
          // 2
          {
            title: "k值",
            dataIndex: "param1",
          },
          {
            title: "m值",
            dataIndex: "param2",
          },
        ],
      },

      // 长江中下游数据
      cjSedData: {
        csps: [],
        eds: [],
        kms: [],
      },
      cjColumns: {
        csps: [
          {
            title: "<0.005mm",
            dataIndex: "param1",
          },
          {
            title: "0.01mm",
            dataIndex: "param2",
          },
          {
            title: "0.025mm",
            dataIndex: "param3",
          },
          {
            title: "0.05mm",
            dataIndex: "param4",
          },
          {
            title: "0.1mm",
            dataIndex: "param5",
          },
          {
            title: "0.25mm",
            dataIndex: "param6",
          },
          {
            title: "0.5mm",
            dataIndex: "param7",
          },
          {
            title: "1mm",
            dataIndex: "param8",
          },
          {
            title: "2mm",
            dataIndex: "param9",
          },
          {
            title: "4mm",
            dataIndex: "param10",
          },
          {
            title: "8mm",
            dataIndex: "param11",
          },
          {
            title: "16mm",
            dataIndex: "param12",
          },
          {
            title: "32mm",
            dataIndex: "param13",
          },
          {
            title: "64mm",
            dataIndex: "param14",
          },
          {
            title: "128mm",
            dataIndex: "param15",
          },
          {
            title: "250mm",
            dataIndex: "param16",
          },
        ],
        eds: [
          {
            title: "站点名称",
            dataIndex: "name",
          },
          {
            title: "a冲",
            dataIndex: "ablunt",
          },
          {
            title: "a淤",
            dataIndex: "amud",
          },
        ],
        kms: [
          {
            title: "站点名称",
            dataIndex: "name",
          },
          {
            title: "m值",
            dataIndex: "mvalue",
          },
          {
            title: "k值",
            dataIndex: "kvalue",
          },
        ],
      },
    });

    // 方案参数信息
    const planDataMsgForm: any = inject("planDataMsgForm");

    watch(
      () => planDataMsgForm,
      (value, prevCount) => {
        proxy.throttle("sedParam", () => {
          if (planDataMsgForm.selectReservoir != "长江中下游") {
            getReadSed();
          } else {
            getReadCjSed();
          }
        });
      },
      { deep: true }
    );

    /**
     * @description: 获取非长江泥沙参数
     * 非长江河道断面信息(三峡,上游四库,两坝间及向家坝至朱沱)
     * @return {*}
     */
    function getReadSed() {
      selectNsArguments({
        id: planDataMsgForm.selectParamPlan,
        reservoir: planDataMsgForm.selectReservoir,
        Fatype: "csfa",
      }).then((res: any) => {
        for (const key in res.data) {
          // 处理顶部输入框泥沙参数
          if (key != "csps" && key != "csgds" && key != "eds" && key != "kms") {
            if (key === "ch" || key === "sc") {
            } else {
              state.sedData.topData[key] = res.data[key].split(",");
            }
          } else {
            //处理下方表格类泥沙参数

            // 生成表格参数
            let arr = [];
            res.data[key].forEach((item) => {
              let obj = {
                key,
                dataName: "",
              };
              item.split(",").forEach((ele, i) => {
                if (i === 0) {
                  obj.dataName = ele;
                } else {
                  obj["param" + i] = ele;
                }
              });

              arr.push(obj);
            });

            state.sedData.bottomData[key] = arr;
          }
        }
      });
    }

    /**
     * @description: 获取长江泥沙参数
     * @return {*}
     */
    function getReadCjSed() {
      // 床沙级配
      queryBedGradationScheme({
        gradationId: planDataMsgForm.selectParamPlan,
        queryType: "1",
      }).then((res: any) => {
        let cspsArray = [];

        for (const key in res.data) {
          cspsArray.push({
            title: key,
            type: "title",
            num: res.data[key][0].gradationArrays.length + 1,
          });

          res.data[key].forEach((item) => {
            let obj = {
              title: `${item.sectionStart}~${item.sectionEnd}`,
              type: "data",
            };

            item.gradationArrays.forEach((ele, i) => {
              obj["param" + (i + 1)] = ele.trim();
            });

            cspsArray.push(obj);
          });
        }

        state.cjSedData.csps = cspsArray;
      });

      // 协沙力系数(颗粒级配)
      queryParticlesScheme({
        particlesId: planDataMsgForm.selectParamPlan,
        queryType: "1",
      }).then((res: any) => {
        let edsArray = [];
        let kmsArray = [];

        for (const key in res.data) {
          res.data[key].forEach((item) => {
            edsArray.push({
              name: item.mainReachName,
              type: "title",
              num: 3,
            });
            kmsArray.push({
              name: item.mainReachName,
              type: "title",
              num: 3,
            });

            item.yangtzeParticles.forEach((ele) => {
              edsArray.push({
                name: `${ele.sectionName}`,
                ablunt: ele.ablunt,
                amud: ele.amud,
              });

              kmsArray.push({
                name: `${ele.sectionName}`,
                mvalue: ele.mValue,
                kvalue: ele.kValue,
              });
            });
          });
        }

        // 冲淤
        state.cjSedData.eds = edsArray;

        // 挟沙
        state.cjSedData.kms = kmsArray;
      });
    }

    function labelText(text) {
      switch (text) {
        case "ch":
          return "总交换层厚度(m)";
        case "sc":
          return "初始含沙量(kg/m³)";
        case "ssp":
          return "泥沙级配(%)";
        case "csgds":
          return "悬沙干容重(g)";
        case "csps":
          return "床沙级配(%)";
        case "kms":
          return "挟沙力系数";
        case "eds":
          return "冲淤系数";
      }
    }

    /**
     * @description: 干流糙率表格单元格合并
     * @param {*} row 行数据
     * @return {*}
     */
    function roughnessTableSpanMethod({ row }) {
      if (row.type === "title") {
        return {
          rowspan: 1,
          colspan: row.num,
        };
      }
    }

    return {
      ...toRefs(state),

      planDataMsgForm,

      labelText,

      roughnessTableSpanMethod,
    };
  },
});
</script>

<style scoped lang="less">
.left-box {
  float: left;
  width: 49%;
  height: 100%;

  .box-card {
    margin-bottom: 28px;
  }
}

.right-box {
  float: right;
  width: 49%;
  height: 100%;
  .box-card {
    height: 48%;
  }
}
</style>
